﻿@page "/components/chips"
@page "/components/MudChip"
@page "/components/MudChip`1"

<DocsPage>
    <DocsPageHeader Title="Chips" SubTitle="Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.">
        <Description><br />See also: <MudLink Href="/components/chipset">ChipSet</MudLink></Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Filled Chips">
                <Description>The Chips, when disabled, differ from other components. Instead of using the disabled color, the opacity is lowered.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipBasicExample)" Block="true">
                <ChipBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Text Chips">
                <Description>Text Chips also differ from other components where it has transparent background instead of fully transparent.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipTextExample)"  Block="true">
                <ChipTextExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Outlined Chips">
                <Description>This looks and feels like outlined normaly do with a border and slightly transparent background on hover.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipOutlinedExample)"  Block="true">
                <ChipOutlinedExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Closable">
                <Description>You can change the close icon with the <CodeInline>CloseIcon</CodeInline> prop.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipClosableExample)">
                <ChipClosableExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Clickable">
                <Description>
                    The <CodeInline>OnClick</CodeInline> handler provides the EventCallback for clicking on the body of the chip.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipClickableExample)">
                <ChipClickableExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Icons">
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipIconExample)">
                <ChipIconExample />
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Avatars">
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipAvatarExample)">
                <ChipAvatarExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Label">
                <Description>Label Chips use the default theme border-radius.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipLabelExample)">
                <ChipLabelExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sizes">
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSizeExample)">
                <ChipSizeExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
